<div id="hot_maps" v-cloak>
        <row>
            <i-col span="24">
                <div style="position:absolute;z-index: 10;">
                    <ul class="ivu-timeline" id="month-line"> </ul>
                </div>
    
                <div style="position:absolute;z-index: 10;left: 20%;display: flex;padding: 5px;border-radius: 10% 10%;background-color: #ffffff;">
                    <i-select v-model="type" multiple style="width:200px">
                        <i-option v-for="item in types" :value="item.value" :key="item.value" @on-change="checkType">{{
                            item.name }}</i-option>
                    </i-select>
    
                    <div v-show="clustering"> 
                        <span style="font-size: 15px;line-height: 32px;margin-left: 20px;">聚类中心数:</span>
                        <i-select v-model="cluNum" style="width:50px">
                            <i-option v-for="item in cluNums" :value="item.value" :key="item.value">{{
                                item.value }}</i-option>
                        </i-select>
                    </div>
                    <span style="font-size: 15px;line-height: 32px;margin-left: 10px;color: #436335;margin-right: 10px;">热力图种类:</span>
                    <i-select v-model="dataType" style="width:100px">
                        <i-option v-for="item in dataTypes" :value="item.value" :key="item.value">{{
                            item.name }}</i-option>
                    </i-select>
                    <date-picker type="daterange" placement="bottom-end" split-panels placeholder="选择日期" style="width: 200px;margin-left: 10px "
                        @on-change="customData"></date-picker>
                    <i-button type="primary" ghost @click="cleanMap" style="margin-left: 10px;">清除图层</i-button>
                    <div v-show="display">
                        <i-button id="keepStop" style="display: block;" v-show="btnDis" @click="stopMaps">{{stopMap}}</i-button>
                    </div>
                    <div class="time-line" v-show="display">
                        <span style="font-size: 15px;line-height: 32px;margin-left: 10px;color: #436335;">选择区间:</span>
                        <i-select v-model="yearList" multiple style="width:100px ;margin-left:10px">
                            <i-option v-for="item in year" :value="item.value" :key="item.value" @on-change="checkData">{{
                                item.value }}年</i-option>
                        </i-select>
                        <i-select v-model="monthList" style="width:100px;margin-left: 10px" @on-change="checkData">
                            <i-option v-for="item in month" :value="item.value" :key="item.value">间隔{{ item.value }}个月</i-option>
                        </i-select>
                    </div>
                </div>
    
            </i-col>
        </row>
        <div id="hotmaps"></div>
    </div>
    <style>
        #hotmaps {
            height: 100vh;
        }
        #month-line{
            left:0;
            margin-top: 10px;
            margin-left: 10px;
            color:#fff
        }
    </style>
    <script type="text/javascript" src="JS/page/logistics/hot_maps.js"></script>